//import { State, Navigation } from 'react-router';
import { History } from 'react-router';
import React from 'react';
import { SidebarBtn } from 'global/jsx/sidebar_component';
import ReactMixin from 'react-mixin';
import AutobindMixin from '../tools/autobindMixin';

class Brand extends React.Component {
    render() {
        return (
            <NavHeader {...this.props}>
                <NavBrand tabIndex='-1'>
                    <img src={ window.staticUrl + 'imgs/logo.png'} alt='rubix' width='111' height='28'/>
                </NavBrand>
            </NavHeader>
        );
    }
}

@ReactMixin.decorate(History)
@ReactMixin.decorate(AutobindMixin)
class HeaderNavigation extends React.Component {
    static displayName = 'HeaderNavigation';
    static propTypes = {
        logout: React.PropTypes.func.isRequired
    }
    handleItemSelect(props) {
        const { logout } = this.props;
        if (props.action === 'logout') {
            logout();
        }
    }
    render() {
        const props = Object.assign({}, this.props, {
            className: 'pull-right'
        });
        return (
            <NavContent {...props}>
                <Nav onItemSelect={this.handleItemSelect}>
                    <NavItem action='logout' className='logout' href='javascript:void(0)' >
                        <Icon bundle='fontello' glyph='off-1' />
                    </NavItem>
                </Nav>
            </NavContent>
        );
    }
}

export default class Header extends React.Component {
    static propTypes = {
        logout: React.PropTypes.func.isRequired
    }
    render() {
        const { logout } = this.props;
        return (
            <Grid id='navbar' {...this.props}>
                <Row>
                    <Col xs={12}>
                        <NavBar fixedTop id='rubix-nav-header'>
                            <Container fluid>
                                <Row>
                                    <Col xs={3} visible='xs'>
                                        <SidebarBtn />
                                    </Col>
                                    <Col xs={6} sm={4}>
                                        <Brand />
                                    </Col>
                                    <Col xs={3} sm={8}>
                                        <HeaderNavigation logout={logout}/>
                                    </Col>
                                </Row>
                            </Container>
                        </NavBar>
                    </Col>
                </Row>
            </Grid>
        );
    }
}
